<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
				.red-text{
					color:red;
				}
				.del{
					color:blue;
					cursor: pointer;
				}
		</style>
	</head>
	<body>
		<table border='1'>
			<tr>
				<th>学号</th>
				<th>姓名</th>
				<th>专业</th>
				<th>操作</th>
			</tr>
			<tr>
				<td width="200" align="center">
					001
				</td>
				<td width="200" align="center">
					张三
				</td>
				<td width="200" align="center">
					软件技术
				</td>
					<td width="200" align="center">
					删除
				</td>
			</tr>
			<tr>
				<td width="200" align="center">
					001
				</td>
				<td width="200" align="center">
					张三
				</td>
				<td width="200" align="center">
					软件技术
				</td>
				<td width="200" align="center">
					删除
				</td>
			</tr>
		</table>
	</body>
	    <script type="text/javascript">
			window.onload=function() {
				let oBtnred=document.getElementById('btnred')
				oBtnRed.onclick=function() {
					console.log(222)
					changeColor('red')
				}
			document.getElementById('btnBule').onclick=function() {
				console.log(111)
				changeColor('blue')
			}
			function changeColor(color) {
				document.getElementById('span').innerHTML
				=`<span id='span'style='color:$(color)'>$(3+2)</span>`
			}	
			}
	    </script>
		<script type="text/javascript">
			window.onload=function() {
				let myobj=[{
					id:1,
					sno:"001",
					name:"张三",
					subject:"软件技术"
				}]
				let dtable =document.getElementById('table')
				let html=otable.innerHTML
				myobj.forEach(ITEM=> {
					html +=`
					<tr>
						<td width="200"align="center">
						$(item.son)
						</td>
					</tr>
				})
			}
		</script>
</html>
